<template>
  <div>
     <!-- 回顶 -->
      <top></top>
    <div>
      <!-- 商品详情页 -->
      <div>
        <h1 class="title">{{ title.Chinese }}店</h1>
        <h2>{{ title.English_name }}</h2>
      </div>
      <div class="nav1">
        <router-link class="index" to="/">首页</router-link>
        <span>></span>
        <span @click="goto()">返回上一页</span>
      </div>
      <!-- 轮播图 -->
      <mt-swipe :auto="5000">
        <mt-swipe-item>
          <img v-src="data.img1" alt="" />
        </mt-swipe-item>
        <mt-swipe-item v-if="index2 < 3 ? false : true">
          <img v-src="data.img2" alt="" />
        </mt-swipe-item>
        <mt-swipe-item v-if="index3 < 3 ? false : true">
          <img v-src="data.img3" alt="" />
        </mt-swipe-item>
        <mt-swipe-item v-if="index4 < 3 ? false : true">
          <img v-src="data.img4" alt="" />
        </mt-swipe-item>
        <mt-swipe-item v-if="index5 < 3 ? false : true">
          <img v-src="data.img5" alt="" />
        </mt-swipe-item>
      </mt-swipe>
      <!-- 型号 -->
      <div>
        <div class="new" v-if="data.isNew == 'true'">NEW</div>
        <p class="type">{{ data.title }}</p>
      </div>

      <!-- 介绍 -->
      <div class="desc">
        {{ data.explains }}
      </div>

      <div class="page">
        <mt-button
          @click="pageUp"
          type="primary"
          style="background-color: #a7a7a7"
          >上一组</mt-button
        >
        <mt-button
          @click="pageDown"
          type="primary"
          style="background-color: #a7a7a7"
          >下一组</mt-button
        >
      </div>
      <hr style="margin: 30px 0" />
      <!-- 按钮 -->
      <div class="btn">
        <mt-button @click="checkXyd" type="primary">加入心愿单</mt-button>
        <mt-button
          @click="checkYy"
          type="primary"
          style="background-color: #a7a7a7"
          >立即预约</mt-button
        >
      </div>
      <store :title="title"></store>
      <Guesst></Guesst>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);

import store from "@/components/store.vue";
import Guesst from "@/components/Guesst.vue";
import Top from "@/components/Top.vue";
export default {
  inject: ["reload"],
  components: {
    Guesst,
    Top,
    store,
  },
  data() {
    return {
      data: {},
      title: {},
      index2: "",
      index3: "",
      index4: "",
      index5: "",
      lid: "1",
      proid:this.$route.query.lid,
      useid:this.$store.state.uid,
    };
  },
  methods: {
    // 返回
    goto(){
      this.$router.go(-1)
    },
    // 心愿单跳转
    checkXyd() {
      if (this.$store.state.uname) {
        this.proid =parseInt(this.$route.query.lid)+1
        console.log(this.proid);
        let params = `details_id=${this.proid}&author_id=${this.useid}`;
        this.axios.post("/like_add", params).then((res) => {
          console.log("添加",res);
          if (res.data.code == 200) {
            // this.$messagebox("加入成功");
            Toast({
              message: '加入成功',
              icon: 'like',
            });
          } else {
            Toast({
            message:'宝贝已经存在',
            icon: 'fail',
            })
          }
        });
      } else {
        this.$dialog.confirm({
          title:'温馨提示',
          message: '你还没有登录哟',
          // cancelButtonColor: black,
          // canfirmButtonColor: black,
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            this.reload()
          });
      }
    },
    pageUp() {
      if (this.lid > 0) {
        let lid = --this.lid;
        this.$router.push(`/westernDetail?lid=${lid}`);
      }
    },
    pageDown() {
      if (this.lid < 30) {
        let lid = ++this.lid;
        this.$router.push(`/westernDetail?lid=${lid}`);
      }
    },
    // 预约跳转
    checkYy() {
      if (this.$store.state.uname) {
        // this.$router.push("/sc");
        this.$router.push({
          // 跳转到的页面路径
          path: '/sc',
          // 传递的参数集合
          query: {
            title:this.title,
            data:this.data
            
          }
        })

      }else{
        this.$dialog.confirm({
          title:'温馨提示',
          message: '你还没有登录哟',
          //cancelButtonColor: #1E1E1E,
          canfirmButtonColor:'#1E1E1E',
        })
          .then(() => {
            this.$router.push("/login");
            
          })
          .catch(() => {
            this.reload()
          });
      }
    },

    // 商品轮播图
    getSwiper() {
      // 轮播图及介绍
      const url = `/pro_detail?westerndetail_id=${parseInt(this.$route.query.lid)+ 1}`
      this.axios.get(url).then((res) => {
        this.data = res.data.results[0]
        this.index2 = this.data.img2.length;
        this.index3 = this.data.img3.length;
        this.index4 = this.data.img4.length;
        this.index5 = this.data.img5.length;
      });
    },
    // 店铺信息
    proStore(){
      let params = `westerndetail_id=${parseInt(this.$route.query.lid)+ 1}`
      this.axios.post("/pro_store",params).then((res) => {
        this.title = res.data.results[0]
      })
    }
  },
  mounted() {
    // 轮播图
    this.getSwiper();
    this.proStore();
  },
  watch: {
    $route() {
      this.getSwiper();
      // //标题
      // this.axios.get("/store").then((res) => {
      //   console.log("res", res);
      //   let lid1 = this.data.westerndetail_id;
      //   console.log("lid1", lid1);
      //   if (lid1 > 0 && lid1 <= 5) {
      //     this.title = res.data.results[0];
      //     console.log("title", this.title.Chinese);
      //   } else if (lid1 > 5 && lid1 <= 10) {
      //     this.title = res.data.results[1];
      //   } else if (lid1 > 10 && lid1 <= 15) {
      //     this.title = res.data.results[2];
      //   } else if (lid1 > 15 && lid1 <= 20) {
      //     this.title = res.data.results[3];
      //   } else if (lid1 > 20 && lid1 <= 25) {
      //     this.title = res.data.results[4];
      //   } else {
      //     this.title = res.data.results[5];
      //   }
      // });
    },
  },
};
</script>
/* 外部样式引入 */
<style scoped src="../../../assets/CSS/Photographic_display.css"></style>
<style scoped>
.title {
  font-family: Prata, serif;
  font-size: 30px;
  letter-spacing: 0.35rem;
  color: #022834;
  text-align: center;
  margin: 0;
  padding-bottom: 0;
}

h2 {
  font-family: Libre Baskerville, sans-serif;
  font-size: 1.4rem;
  color: #999;
  text-align: center;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 20px;
}

.mint-swipe {
  height: 135vw;
  text-align: center;
}

.mint-swipe img {
  width: 95%;
  display: inline;
  height: 126vw;
}

.mint-button {
  background-color: rgb(21, 2, 2);
  color: rgb(249, 243, 243);
  width: 100px;
  margin-left: 10px;
  font-family: cursive;
  border: 1px solid #a7a7a7;
}

.new {
  display: inline-block;
  border: 1px solid #786542;
  border-radius: 5px;
  font-family: system-ui;
  font-size: 14px;
  padding: 3px 11px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.type {
  font-family: fangsong;
  font-size: 20px;
  letter-spacing: 0.25rem;
  color: #000;
  margin: 0;
  margin-left: 10px;
  padding-bottom: 50px;
}

.desc {
  font-size: 5vw;
  font-family: cursive;
  padding-right: 10px;
  padding-left: 10px;
  text-align: left;
  text-align: justify;
}

.link {
  display: flex;
  text-align: center;
  justify-content: space-between;
  color: rgb(72, 33, 33);
  margin: 30px 0;
}

.link a {
  text-decoration: none;
  color: black;
}

.btn {
  text-align: center;
  margin-bottom: 70px;
}

.btn button {
  background-color: #444;
  color: #fff;
  margin: 0 10px;
  font-family: cursive;
  font-size: 6vw;
  border-radius: 10px;
  width: 42vw;
  height: 15vw;
}
.page {
  text-align: center;
  margin-top: 10vw;
}
::v-deep .mint-msgbox-confirm {
  color: #000;
}

.nav1 {
  margin:2vw 3vw;
  font-size: 15px;
}
.nav1 span {
  padding: 0 4px;
}
::v-deep .van-dialog{
  font-size: 1em;
}
::v-deep .van-dialog__confirm{
  color: #000;
}
::v-deep .van-button__content{
  color: #999;
}
</style>
